<template>
    <modal class='component-image-view' 
        :show='show' 
        @close='emitClose' 
        view 
        transition='fade'
        :deleteButton='deleteButton' 
        @delete='emitDelete' 
        :width='width'
        :height='height'
        :maxHeight='maxHeight'>
        <div class='component-image-view__content'>
            <img v-if='src' :src="url">
            <loading v-else mode='full' color='#fff' :size='12'></loading>
        </div>
    </modal>
</template>

<script>
    import modal from './Modal.vue'
    import loading from './Loading.vue'

    export default {
        components:{ modal,loading },
        props:{
            url:{
                type: String,
                default: false,
                required: true,
            },
            deleteButton:{
                type: Boolean,
                default:false
            },
            width:{
                type: String,
                default:'80%'
            },
            height:{
                type: String,
                default:'80%'
            },
            maxHeight:{
                type: String,
                default:'90%'
            },
            show:{
                type: Boolean,
                required: true,
            }
        },
        data() {
            return {
                src:''
            }
        },
        methods:{
            emitClose(){
                this.$emit('close')
            },
            emitDelete(){
                this.$emit('delete')
            },
            init(){
                this.src = ''
                let img = new Image()
                img.onload = ()=>{
                    this.src = img.src
                }
                img.src = this.url
                if(img.complete){
                    this.src = img.src
                    return
                }
            }
        },
        created(){
            this.init()
        },
        watch: {
            'url'(newVal,oldVal){
                if(newVal == oldVal) return
                else{
                    this.init()
                }
            }
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .component-image-view{
        .component-modal__container{
            background-color: transparent;
            box-shadow:none;
        }
        .component-modal__main{
            padding: 0;
            text-align: center;
            width: 100%;
            overflow:auto;
            -webkit-overflow-scrolling: touch;
        }
    }
    .component-image-view__content{
        min-height:40px;
        // box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.12), 0 16px 16px 0 rgba(0, 0, 0, 0.12);
        img{
            // position: absolute;
            // top:50%;
            // left:50%;
            // transform:translate(-50%, -50%);
            max-width: 100%;
        }
    }
</style>


